<template>
  <div id="app" class="call-worker">
    <van-button v-if="showCallBtn" class="van-button-nav" plain type="info" @click="showWorkerPopFn">呼叫</van-button>
    <!-- 呼叫 -->
    <van-popup v-model="showWorkerPop" get-container="#app" @close="$emit('close')">
      <div v-if="showWorkerPop" style="display: flex; height: 90vh; width: 86vw;">
        <div style="display: flex; flex-wrap: wrap; padding: 1vh 1vw; height: 90vh; flex: 0 0 40vw; border-right: 1px solid #e6a23c; overflow: auto">
          <van-button v-for="(worker, wIndex) in workerData" :style="renderWorkerBtnFn(wIndex, 8)" @click="confirmCallFn(worker)">{{ worker }}</van-button>
        </div>
        <div style="overflow: auto; padding: 1vh 1vw; height: 90vh; flex: 0 0 45vw;">
          <div v-for="(call, cIndex) in callData" style="display: flex; align-items: center">
            <div style="flex: 0 0 8vw">
              <span style="font-size: 1.5rem;">{{ call.reporterName }}</span>
            </div>
            <div style="flex: 0 0 8vw">
              <span style="font-size: 1.5rem;">{{ call.operatorName }}</span>
            </div>
            <div style="flex: 0 0 20vw">
              <span style="font-size: 1.5rem;">{{ call.createAt }} </span>
            </div>
            <div style="flex: 1">
              <van-button style="width: 6vw;font-size: 1.2rem" size="small" type="warning" @click="report4CallingFn(call, cIndex)">已到</van-button>
            </div>
          </div>
        </div>
      </div>

    </van-popup>

  </div>
</template>

<script>
import {callWorker, loadCallByMachineData, loadWorkerByDep, report4Calling} from "@/views/call-worker/call-worker";
import {SPLIT_BLANK, SPLIT_COMMA} from "@/utils/enum";
import {getConfigData} from "@/utils/auth";
import CnChar from "cnchar";

export default {
  name: "callWorker",
  components: {CnChar},
  props: {
    depId: {
      type: String,
      default: "45",    //后端配置车间ID
    },
    showCallBtn: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      /* 员工弹窗 */
      showWorkerPop: false,
      workerData: [],   //员工列表
      workerBtnColor: ["#e3735a", "#e3a35a", "#bce35a", "#5ae35c", "#5ae3de", "#5a81e3", "#bc5ae3", "#e35a8a", "#685ae3"],

      /* 呼叫列表相关 */
      callParam: {
        depId: this.depId,
        machineType: SPLIT_BLANK,
        workerName: SPLIT_BLANK,
      },
      callData: [],
    }
  },
  mounted() {
    const that = this;
    that.initFn();
  },
  methods: {
    /* 初始化 */
    initFn() {
      const that = this;

      //设置呼叫查询条件
      that.callParam.machineType = getConfigData().name;

      //加载员工信息
      let hidden = ["景观房", "审核", "染整", "老板", "老大", "会议", "维保", "王絮", "隔壁老王", "打样室", "直播", "刘江平", "数据处理"];
      loadWorkerByDep({ depId: that.depId }, workers => {
        workers.forEach(worker => {
          if(!hidden.some(s => worker.realName.indexOf(s) >= 0)) {
            that.workerData.push(worker.realName);
          }
        });
        that.workerData.sort((a, b) => {
          if(CnChar.stroke(a[0]) == CnChar.stroke(b[0])) {
            return a[0].localeCompare(b[0], 'zh-Hans-CN', { sensitivity: 'accent' });
          } else {
            return CnChar.stroke(a[0]) - CnChar.stroke(b[0]);
          }
        })
      });
    },

    /* 显示员工pop */
    showWorkerPopFn() {
      const that = this;
      that.showWorkerPop = true;
      that.callParam.workerName = "";
      that.loadCallDataFn();
    },

    /* 渲染员工按钮 */
    renderWorkerBtnFn(wIndex, width) {
      const that = this;
      let style = {
        backgroundColor: that.workerBtnColor[wIndex%that.workerBtnColor.length],
        marginLeft: "1vw",
        marginBottom: "1vh",
        color: "#FFFFFF",
        fontSize: "larger",
        fontWeight: "bolder",
      };
      if(width) {
        style.width = width + "vw";
      }
      return style;
    },

    /* 确认呼叫 */
    confirmCallFn(worker) {
      const that = this;
      that.$dialog.confirm({
        title: "请选择呼叫还是查看",
        message: '<span style="font-size: 2rem;color:red;">' + worker + '</span>',
        confirmButtonText: "确认呼叫",
        cancelButtonText: "查看呼叫",
        allowHtml: true,
      }).then(() => {
        let configData = getConfigData();
        callWorker({
          id: "",
          depId: that.depId,   //后端配置部门ID
          optType: "呼叫",
          machineType: configData.name,
          no: worker + SPLIT_COMMA + worker + SPLIT_COMMA + "请到" + configData.area + SPLIT_COMMA + configData.name,
          optRemark: "",
          status: 1,
        }, () => {
          that.$toast.success("呼叫成功");
          that.loadCallDataFn();
        })
      }).catch(() => {
        that.callParam.workerName = worker;
        that.loadCallDataFn();
      });
    },

    /* 加载列表 */
    loadCallDataFn() {
      const that = this;
      that.callData.splice(0, that.callData.length);
      loadCallByMachineData(that.callParam, res => {
        res.forEach(row => that.callData.push(row));
      });
    },

    /* 报到 */
    report4CallingFn(call, cIndex) {
      const that = this;
      report4Calling({
        depId: that.depId,
        recordId: call.id
      }, () => {
        that.callData.splice(cIndex, 1);
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.call-worker {
  .van-button-nav {
    font-size: 28px;
    width: 150px;
  }
}
</style>